<template>
 <div class="search-box">
    <div class="search" :class="showList ? 'active' : ''" @click.stop>
    <div >
        <input v-model="searchContent" @keydown.enter="goAbout" @keydown.up="choseUp" @keydown.down="choseDown" :class="showList ? 'isBorder' : ''" type="text" @focus="showList = true">
        <i></i>
    </div>
    <ul v-show="showList">
        <li v-for="(item, i) in searchList" :class="searchContent == item ? 'check' : ''" :key="i" @click.stop="getContent(item)">{{item}}</li>
    </ul>
    </div>
    <button>百度一下</button>
</div>
</template>

<script>
    import { ref, computed } from 'vue'
    import { useStore } from 'vuex'
    import { useRouter } from 'vue-router'
    export default {
    setup() {
        // 引入路由跳转方法
        let router = useRouter()
        let store = useStore()
        // 定义一个数据标记下拉选项是否出现
        const showList = ref(false)
        
        // 选中的搜索内容
        const searchContent = ref('')

        // 声明一个当前选中项的索引值
        let ind = -1

        const searchList = computed(() => store.state.searchList)
        document.body.onclick = function() { // 点击文档的其他部分 隐藏搜索选项
            showList.value = false
        }
        // 点击键盘向上翻页键的时候
        function choseUp() {
            // console.log(ind);
            if(ind < 0) {
                ind = searchList.value.length - 1
            } else {
                ind--
            }
            
            searchContent.value = searchList.value[ind]
        }

        // 点击键盘向下翻页键的时候
        function choseDown() {
            if(ind == searchList.value.length) {
                ind = 0
            } else {
                ind++
            }
            searchContent.value = searchList.value[ind]
        }

        // 点击enter键 进入搜索结果页面
        function goAbout() {
            router.push({
                path: '/about',
                query: {
                    md: searchContent.value
                }
            })
        }

        function getContent(item) {
            // console.log(1);
            router.push({
                path: '/about',
                query: {
                    md: item
                }
            })
        }

        return {
            showList,
            searchList,
            searchContent,
            choseUp,
            choseDown,
            goAbout,
            getContent
        }
    }
    }
</script>

<style scoped lang="scss">
.search-box {
    margin-top: 20px;
    display: flex;
    .search {
      border: 2px solid #c4c7ce;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      div {
          width: 548px;
          text-align: left;
          padding: 0 10px;
          border-right: none;
          input {
            border: none;
            outline: none;
            height: 40px;
            width: 100%;
            font-size: 18px;
            
          }
          .isBorder {
              border-bottom: 1px solid #ccc;
          }
        }
        
    }
    .active {
      border-color: #4e6ef2;
      border-bottom-right-radius: 8px;
    }
      
  }
  button {
    outline: none;
    border: none;
    width: 106px;
    flex-shrink: 0;
    margin-left: -2px;
    height: 44px;
    background-color: #4e6ef2;
    color: #fff;
    font-size: 18px;
    color: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
          
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    
    li {
      line-height: 30px;
      font-size: 14px;
      padding-left: 10px;
    }
    li:hover {
        background-color: #eee;
        color: #4e6ef2;
    }
    .check {
        background-color: #eee;
        color: #4e6ef2;
    }
  }
  
</style>